import React from 'react'
import { useNavigate, useLocation } from "react-router-dom"
import { ArrowLeft } from '@react-vant/icons';
import { Button } from 'react-vant'
type Props = {}

const Paymentdetails = (props: Props) => {
  const navigate = useNavigate()
  const location = useLocation()
  console.log(location.state);
  const lists = location.state
  // 出发地
  const start = lists.title.slice(0, 3)
  // 目的地
  const end = lists.title.slice(4, 8)
  return (
    <div className='paymentdetails'>
      <header>
        <span onClick={() => navigate(-1)}><ArrowLeft /></span><span>支付详情</span><span></span>
      </header>
      <main>
        <div className="picy">
          <div className="vote">
            <p className='p1'>
              <span>成人票</span><span>￥{lists.price}x1张</span>
            </p>
            <p className='p1'>
              <span >订单总计</span><span>￥{lists.price}</span>
            </p>
            <p className='p1'>
              <span>订单号</span><span>E369941878</span>
            </p>
            <p>
              <span>通知手机</span><span>188123456789</span>
            </p>
          </div>
        </div>
        <p>请选择一下的支付方式:</p>
        <div className="button">
          <Button round type='primary' onClick={() => navigate('/home/orderForGoods')}>
            微信
          </Button>
          <Button round type='primary' onClick={() => navigate('/home/orderForGoods')} color='#5A88FE'>
            支付宝
          </Button>
          <Button round type='primary' onClick={() => navigate('/home/orderForGoods')} color='#F7515C'>
            银行卡
          </Button>
        </div>

      </main>
    </div>
  )
}

export default Paymentdetails